// src/components/conversation-hero.tsx
import React from 'react';
import {Avatar, AvatarFallback, AvatarImage} from "@/components/ui/avatar";

interface Props {
    name: string
    image: string
}

const ConversationHero = ({name='Member', image}: Props) => {
    return (
        <div className={`mt-[88px] mx-5 mb-4`}>
            <div className={`flex items-center gap-x-1 mb-2`}>
                <Avatar className={`size-14 mr-2 rounded-md`}>
                    <AvatarImage className={`rounded-md`} src={image}/>
                    <AvatarFallback className={`rounded-md`} >
                        {name.charAt(0).toUpperCase()}
                    </AvatarFallback>
                </Avatar>
                <p className={`text-2xl font-bold`}>
                    {name}
                </p>
            </div>
            <p className={`font-normal text-slate-800 mb-4`}>
                This conversation is just between you and <strong>{name}</strong>
            </p>
        </div>
    );
};

export default ConversationHero;